<template>
  <div>
    <a-layout>
      <a-layout-header>
        <a-row style="text-align: center">
          <a-col :span="6" style="margin-top: 30px">
            <a-image
              v-if="infoData.u_avatar"
              :width="100"
              :height="100"
              :src="'/api/avatar/' + infoData.u_avatar"
            ></a-image>
            <a-image
              v-else
              :width="100"
              :height="100"
              src
              fallback=""
            />
          </a-col>
          <a-col :span="10">{{ infoData.u_name }}({{ infoData.u_id }})</a-col>
          <a-col :span="8">
            <a-tag v-for="tag in tagList" :key="tag.ut_id">{{tag.ut_name}}</a-tag>
          </a-col>
        </a-row>
        <a-row style="text-align: center">
          <a-col :span="6"
            ><a-button
              v-if="CurrU_id == infoData.u_id"
              @click="toggleShow"
              style="margin-top: 30px"
              >点击此处上传头像</a-button
            ></a-col
          >
          <a-col :span="6">
            <div>
              <a-button
                type="link"
                v-if="CurrU_id == infoData.u_id"
                @click="pushPath('/user/myarticle')"
                >我的文章</a-button
              >
              <a-button type="link" v-else @click="pushPath('/user/myarticle',infoData.u_id)"
                >他的文章</a-button
              >
            </div>
            <div>
              <a-button
                type="link"
                v-if="CurrU_id == infoData.u_id"
                @click="pushPath('/user/subscription')"
                >我的收藏</a-button
              >
              <a-button type="link" v-else @click="pushPath('/user/subscription',infoData.u_id)"
                >他的收藏</a-button
              >
            </div>
          </a-col>
          <a-col :span="6">
            <div>
              <a-button
                type="link"
                v-if="CurrU_id == infoData.u_id"
                @click="pushPath('/user/following')"
                >我的关注</a-button
              >
              <a-button type="link" v-else @click="pushPath('/user/following',infoData.u_id)"
                >他的关注</a-button
              >
            </div>
            <div>
              <a-button
                type="link"
                @click="pushPath('/user/information',infoData.u_id)"
                >个人信息</a-button
              >
            </div>
          </a-col>
          <a-col :span="6">
            <div>
              <a-button
                type="link"
                v-if="CurrU_id == infoData.u_id"
                @click="pushPath('/user/followed')"
                >我的粉丝</a-button
              >
              <a-button type="link" v-else @click="pushPath('/user/followed',infoData.u_id)"
                >他的粉丝</a-button
              >
            </div>
            <div></div>
          </a-col>
        </a-row>
      </a-layout-header>
      <a-layout-content>
        <router-view></router-view>
      </a-layout-content>
    </a-layout>

    <my-upload
      @crop-success="cropSuccess"
      @crop-upload-fail="upload"
      @crop-upload-success="cropUploadSuccess"
      v-model="aa.show"
      img-format="png"
      :size="aa.size"
      langType="zh"
      :noRotate="false"
      :headers="{ Token: getLocalToken() }"
      url="/api/user/information/avatar"
    ></my-upload>
  </div>
</template>

<script>
import { defineComponent, ref, reactive, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import { get, post, getBlob, tip, getLocalToken } from "@/common";
import "babel-polyfill";
import myUpload from "vue-image-crop-upload";

const aa = reactive({
  avatar: "", //用于存储剪切完图片的base64Data和显示回调图片
  show: false, //剪切框显示和隐藏的flag
  size: 2.1,
});

export default defineComponent({
  components: {
    "my-upload": myUpload,
  },
  setup() {
    const infoData = ref({});
    const tagList = ref([]);

    const CurrU_id = ref();
    const getCurrU_id = () => {
      get("/user/home/curr-user2").then((res) => {
        CurrU_id.value = res.data.u_id;
        getInfo();
        console.log(CurrU_id.value);
      });
    };

    const getInfo = () => {
      let u_id = window.location.search.split("=")[1];
      if (u_id) {
        get("/user/information/userinfo?u_id=" + u_id).then((res) => {
          infoData.value = res.data;
          getusertab(u_id);
        });
      } else {
        get("/user/information/userinfo?u_id=" + CurrU_id.value).then((res) => {
          infoData.value = res.data;
          getusertab(CurrU_id.value);
        });
      }
    };

    const getusertab = uid =>{
      get("user/information/usertab?u_id="+uid).then(res=>{
        tagList.value = res.data;
      })
    };

    const router = useRouter();
    const pushPath = (p,v) => {
      router.push({ path: p ,query:{u_id:v}});
    };
    const toggleShow = () => {
      aa.show = !aa.show;
    };
    const cropSuccess = (imgDataUrl) => {
      aa.avatar = imgDataUrl;
    };
    const upload = (imgDataUrl) => {
      toggleShow();
    };
    const cropUploadSuccess = () => {
      getInfo();
    };
    getCurrU_id();
    return {
      infoData,
      CurrU_id,
      getInfo,
      getLocalToken,
      router,
      pushPath,
      aa,
      toggleShow,
      cropSuccess,
      upload,
      cropUploadSuccess,
      getusertab,
      tagList
    };
  },
});
</script>
<style>
.ant-layout {
  background: #00000000;
}
.ant-layout-header {
  background: #ffffff;
  height: auto;
  box-shadow: rgb(182, 182, 182) 2px 2px 2px 2px;
}
.ant-layout-content {
  margin-top:50px;
  margin-bottom:50px;
  box-shadow: rgb(182, 182, 182) 2px 2px 2px 2px;
  background: #ffffff;
}
</style>